<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>系统配置</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
</head>

<body>
    <!-- 侧边导航栏 -->
    <div class="navbar">
        <div class="logo">
            <i class="fas fa-cogs"></i>
            <span>VisPackStream</span>
        </div>
        <div class="nav-links">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>基础信息</span>
            </a>
            <a href="config.html" class="active">
                <i class="fas fa-sliders-h"></i>
                <span>系统配置</span>
            </a>
            <a href="#">
                <i class="fas fa-network-wired"></i>
                <span>网络配置</span>
            </a>
            <a href="#">
                <i class="fas fa-clipboard-list"></i>
                <span>终端日志</span>
            </a>
            <a href="#">
                <i class="fas fa-file-alt"></i>
                <span>文件管理</span>
            </a>
            <a href="#">
                <i class="fas fa-terminal"></i>
                <span>系统终端</span>
            </a>
            <a href="#">
                <i class="fas fa-info-circle"></i>
                <span>关于我们</span>
            </a>
            <a href="/logout" style="margin-top: auto;">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="container">
        <h1><i class="fas fa-cogs"></i> 系统配置</h1>
        
        <form id="config-form">
            <!-- HttpServer配置卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-server"></i> HttpServer配置
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="port"><i class="fas fa-portrait"></i> 监听端口</label>
                        <input type="number" id="port" name="port" required />
                    </div>
                    <div class="form-group">
                        <label for="path"><i class="fas fa-route"></i> 监听路径</label>
                        <input type="text" id="path" name="path" required />
                    </div>
                </div>
            </div>

            <!-- HttpClient配置卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-laptop-code"></i> HttpClient配置
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="targetUrl"><i class="fas fa-arrow-right"></i> 推送地址</label>
                        <input type="text" id="targetUrl" name="targetUrl" required />
                    </div>
                    <div class="form-group">
                        <label for="twinID"><i class="fas fa-id-card"></i> 孪生体ID</label>
                        <input type="text" id="twinID" name="twinID" required />
                    </div>
                </div>
            </div>

            <!-- 用户管理卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-user-cog"></i> 用户管理
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="username"><i class="fas fa-user"></i> 用户名</label>
                        <input type="text" id="username" name="username" required />
                    </div>
                    <div class="form-group">
                        <label for="password"><i class="fas fa-lock"></i> 密码</label>
                        <input type="password" id="password" name="password" required />
                    </div>
                    <button type="submit" class="btn-primary"><i class="fas fa-save"></i> 保存设置</button>
                </div>
            </div>
        </form>

        <div id="status" class="status-message"></div>
    </div>

    <script>
        // 加载现有配置
        fetch("/get-config")
            .then(res => res.json())
            .then(config => {
                document.getElementById("port").value = config.port;
                document.getElementById("path").value = config.path;
                document.getElementById("targetUrl").value = config.targetUrl;
                document.getElementById("twinID").value = config.twinID;
                document.getElementById("username").value = config.username;
                document.getElementById("password").value = config.password;
            });

        // 处理表单提交
        document.getElementById("config-form").addEventListener("submit", e => {
            e.preventDefault();
            const formData = new FormData(e.target);

            fetch("/update-config-restart", {
                method: "POST",
                body: new URLSearchParams(formData)
            })
            .then(res => res.text())
            .then(msg => {
                const statusEl = document.getElementById("status");
                statusEl.textContent = "✅ 配置已更新并重启服务";
                statusEl.classList.add("success");
                
                // 3秒后清除状态消息
                setTimeout(() => {
                    statusEl.textContent = "";
                    statusEl.classList.remove("success");
                }, 3000);
            })
            .catch(err => {
                const statusEl = document.getElementById("status");
                statusEl.textContent = "❌ 配置更新失败: " + err.message;
                statusEl.classList.add("error");
            });
        });
    </script>
</body>

</html>